<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实时交易量监控</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/monitor.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body class="monitor-body">
    <!-- 顶部导航 -->
    <nav class="navbar navbar-expand-lg navbar-dark monitor-navbar">
        <div class="container-fluid">
            <div class="navbar-brand">
                <span class="title-icon">📈</span>
                <span>实时交易量监控</span>
            </div>
            <div class="navbar-text">
                <a href="index.html" class="btn btn-outline-light btn-sm me-2">返回首页</a>
                <a href="province-compare.html" class="btn btn-outline-light btn-sm me-2">省份环比</a>
                <a href="history-monitor.html" class="btn btn-outline-light btn-sm me-2">历史监控</a>
                <span id="currentTime" class="time-display">--</span>
            </div>
        </div>
    </nav>

    <!-- 主要监控区域 -->
    <div class="container-fluid monitor-container">
        <!-- 实时交易量监控 -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="monitor-panel">
                    <div class="panel-header">
                        <h3 class="panel-title">
                            <span class="title-icon">📈</span>
                            交易量实时监控
                        </h3>
                        <div class="panel-controls">
                            <div class="control-group">
                                <label class="control-label">时间范围</label>
                                <select id="transactionTimeRange" class="form-select form-select-sm">
                                    <option value="60">最近1小时</option>
                                    <option value="360" selected>最近6小时</option>
                                    <option value="1440">最近24小时</option>
                                </select>
                            </div>
                            <div class="control-group">
                                <label class="control-label">中心</label>
                                <select id="transactionCenterSelect" class="form-select form-select-sm">
                                    <option value="" selected>全部中心</option>
                                    <option value="hf">合肥中心</option>
                                    <option value="yz">亦庄中心</option>
                                    <option value="lf">廊坊中心</option>
                                </select>
                            </div>
                            <div class="control-group">
                                <label class="control-label">服务平台</label>
                                <select id="transactionServicePlatSelect" class="form-select form-select-sm">
                                    <option value="">全部平台</option>
                                    <option value="web">WEB服务</option>
                                    <option value="jk">接口服务</option>
                                </select>
                            </div>
                            <div class="control-group">
                                <label class="control-label">产品渠道</label>
                                <select id="transactionChelCodeSelect" class="form-select form-select-sm">
                                    <option value="">全部渠道</option>
                                    <option value="01">网银渠道</option>
                                    <option value="02">手机银行</option>
                                    <option value="03">柜面渠道</option>
                                    <option value="04">ATM渠道</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="panel-body">
                        <!-- 统计数据概览 -->
                        <div class="transaction-stats mb-3">
                            <div class="stat-item">
                                <span class="stat-value" id="currentTotalVolume">--</span>
                                <span class="stat-label">总交易量</span>
                            </div>
                            <div class="stat-item">
                                <span class="stat-value success-rate" id="currentSuccessRate">--</span>
                                <span class="stat-label">成功率</span>
                            </div>
                            <div class="stat-item">
                                <span class="stat-value fail-count" id="currentFailCount">--</span>
                                <span class="stat-label">失败笔数</span>
                            </div>
                        </div>
                        <div id="transactionChart" class="chart-container"></div>
                        
                        <!-- 图表说明 -->
                        <div class="chart-legend mt-3">
                            <div class="legend-item">
                                <div class="legend-color" style="background: #4FC3F7;"></div>
                                <span>总交易量 (蓝色粗线)</span>
                            </div>
                            <div class="legend-item">
                                <div class="legend-color" style="background: #81C784;"></div>
                                <span>成功笔数 (绿色线)</span>
                            </div>
                            <div class="legend-item">
                                <div class="legend-color" style="background: #F44336;"></div>
                                <span>失败笔数 (红色线)</span>
                            </div>
                            <div class="legend-item">
                                <div class="legend-color" style="background: #FFC107;"></div>
                                <span>成功率 (黄色虚线，右轴)</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 失败响应码趋势监控 -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="monitor-panel">
                    <div class="panel-header">
                        <h3 class="panel-title">
                            <span class="title-icon">⚠️</span>
                            失败响应码趋势监控
                        </h3>
                        <div class="panel-controls">
                            <div class="control-group">
                                <label class="control-label">时间范围</label>
                                <select id="failCodeTimeRange" class="form-select form-select-sm">
                                    <option value="60">最近1小时</option>
                                    <option value="360" selected>最近6小时</option>
                                    <option value="1440">最近24小时</option>
                                </select>
                            </div>
                            <div class="control-group">
                                <label class="control-label">显示数量</label>
                                <select id="failCodeLimit" class="form-select form-select-sm">
                                    <option value="5">前5名</option>
                                    <option value="10" selected>前10名</option>
                                    <option value="20">前20名</option>
                                </select>
                            </div>
                            <div class="control-group">
                                <label class="control-label">中心</label>
                                <select id="failCodeCenterSelect" class="form-select form-select-sm">
                                    <option value="">全部中心</option>
                                    <option value="hf">合肥中心</option>
                                    <option value="yz">亦庄中心</option>
                                    <option value="lf">廊坊中心</option>
                                </select>
                            </div>
                            <div class="control-group">
                                <label class="control-label">服务平台</label>
                                <select id="failCodeServicePlatSelect" class="form-select form-select-sm">
                                    <option value="">全部平台</option>
                                    <option value="web">WEB服务</option>
                                    <option value="jk">接口服务</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="panel-body">
                        <div id="failCodeChart" class="chart-container"></div>
                        
                        <!-- 失败码说明 -->
                        <div class="chart-legend mt-3">
                            <div class="legend-item">
                                <span>常见失败响应码：</span>
                            </div>
                            <div class="legend-item">
                                <span>Z00000 - 系统异常，110022 - 网络超时，999999 - 未知错误</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 状态指示器 -->
    <div id="statusIndicator" class="status-indicator">
        <div class="status-dot"></div>
        <span class="status-text">连接正常</span>
    </div>

    <!-- 加载中遮罩 -->
    <div id="loadingOverlay" class="loading-overlay">
        <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">加载中...</span>
        </div>
        <div class="loading-text">正在加载交易监控数据...</div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="js/utils.js"></script>
    <script src="js/charts.js"></script>
    <script src="js/transaction-monitor.js"></script>
</body>
</html>